<template>
	<view class="edit_duty_box">
		<view class="item">
			<view class="title">
				星期:
			</view>
		  <picker @change="bindPickerChange" :value="formData.week" :range="weekArr">
				<view class="uni-input">{{weekArr[formData.week]}}</view>
			</picker>
		</view>
		 <view class="item">
		 	<view class="title">
		 		时间:
		 	</view>
			<picker start="5:00" end="20:00" mode="time" :value="formData.time" @change="bindTimeChange">
				<view class="uni-input">{{formData.time}}</view>
			</picker>
		 </view>
	</view>
</template>

<script setup>
	import {ref,watch} from 'vue'
	
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {
		verifyIsLogin
	} from '@/hooks/verify.js'
import moment from 'moment';
	
	const dynamicStyle_store = dynamicStyleStore()
	const dormitoryModel = new DormitoryModel()
	
	const emits=defineEmits(['changeEditDutyDataEmit'])
	
	const {
		primary_text_color
	} = dynamicStyle_store.dormitoryStyle
	
	const props=defineProps({
		formData:{
			type:Object
		}
	})
	
	const formData = ref({})
	const weekArr = ref(['周一','周二','周三','周四','周五','周六','周日'])
	
	watch(()=>props.formData,()=>{
		const data={...props.formData}
		data.week--
		formData.value = data
	},{immediate:true})
	
	const bindTimeChange=(e)=>{
		const dataArr = e.detail.value.split(':')
		formData.value.time = dataArr[0]+':00'
		if(dataArr[1] !== '00'){
			uni.$emit('tips','范围只支持5:00-20:00，且必须是整点','warn',2000)
		}
		emits('changeEditDutyDataEmit',formData.value)
	}
	const bindPickerChange=(e)=>{
		formData.value.week = e.detail.value
		emits('changeEditDutyDataEmit',formData.value)
	}
</script>

<style lang="less">
	.edit_duty_box{
		.item{
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: v-bind(primary_text_color);
			margin: 20rpx 0;
			.title{
				margin-right: 10rpx;
			}
		}
	}
</style>